<template>
	<view class="cateListContainer" v-show="cateObj.category">
		<swiper class="bannerSwiper" :indicator-dots="true" :autoplay="true" indicator-color="green" indicator-active-color="pink" :interval="3000" :duration="1000">
			<swiper-item class="banner-item" v-for="(swiperItem,index) in cateObj.category.bannerUrlList" :key='index'>
				<image class="banner-image" :src="swiperItem" mode=""></image>
			</swiper-item>
		</swiper>
		<text class="title">{{cateObj.category.name}} </text>
		<text class="desc">{{cateObj.category.frontDesc}} </text>
		<shopList :shopList="cateObj.itemList"></shopList>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import shopList from '../shopList/shopList.vue'
	export default {
		props:['navIndex'],
		components:{
			shopList
		},
		data() {
			return {
				cateList:[]
			};
		},
		async mounted() {
			wx.showLoading({
				title: '正在加载中'
			})
			let result = await request('/getIndexCateList')
			this.cateList = result.data
			wx.hideLoading()
		},
		computed:{
			cateObj(){
				return this.cateList.find((item,index)=>{return index === this.navIndex})
			}
		}
	}
</script>

<style lang="stylus">
	.cateListContainer
		.bannerSwiper
			height 350upx
			.banner-item
				.banner-image
					width 100%
					height 100%
		.title
			display block
			margin 16upx auto
			text-align center
			font-size 44upx
		.desc
			display block
			text-align center
			font-size 30upx
			color #999999
</style>
